<!--
 * @Author: your name
 * @Date: 2020-10-29 15:57:38
 * @LastEditTime: 2020-11-04 17:08:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bc-guess-up-down-h5\src\views\My_record.vue
-->
<template>
    <div class="hello ">
        <header-tab msg="我的战绩"></header-tab>

        <img src="../assets/img/zhanji/ico.png" alt="" class="bgc">
        <div class="topBox">
            <img :src="userImg.avatar" alt="" class="img db m0 dl">
            <div class="shre" @click="share">战绩分享</div>
            <p class="ta mb10 fz16 w">{{ usersInfo.memberName }}</p>
            <div class="nick dflex">
                <img src="../assets/img/bb.png" alt="" class="ico wh dl mr5">
                <div class="font dl fz16 ">{{ usersInfo.earnings }} 呗币</div>
            </div>
        </div>

        <div class="bottomBox m0">
            <div class="top fz16" @click="goHistory">
                <div class="line spacebetween sa">
                    <div class="dl">预测次数记录</div>
                    <img src="../assets/img/right1.png" alt="" class="youjiantou dl mb3">
                </div>
            </div>
            <div class="middle spacebetween fz">
                <div>预测</div>
                <div>猜中</div>
                <div>胜率</div>
            </div>
            <div class="bottom spacebetween fz">
                <div>{{ usersInfo.accumulatedGuessBatchNo }}</div>
                <div>{{ usersInfo.accumulatedGuessWinning }}</div>
                <div>{{ usersInfo.winRate }} %</div>
            </div>
        </div>

    </div>
</template>


<script>
import html2canvas from 'html2canvas';
import QRcode from 'qrcodejs2'
import HeaderTab from '../components/HeaderTab.vue'
import {personRecord, memberInfo} from '../api/index.js'
import {getAllToken, setAllToken} from '@/utils/auth'
import {Toast} from 'vant';


export default {
    components: {
        HeaderTab,
        [Toast.name]: Toast
    },
    data() {
        return {
            memberNo: '',
            usersInfo: {  // 海报信息  个人战绩
                earnings: '10',
                memberName: '奖呗'
            },
            userImg: {
                avatar: "https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png",
            }
        }
    },
    mounted() {
        this.memberNo = this.$store.state.user.memberNo || getAllToken("memberNo");
        this.getShare()    //个人战绩
    },
    methods: {
        goHistory() { //去个人战绩
            if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
                this.$router.push({
                    path: "/History_Result",
                })

            } else {
                this.loginIn();
            }
        },
        backPreview() {
            this.$router.go(-1);
        },
       // 获取个人战绩usersInfo
        getShare() {
            let para = {
                "memberNo": this.$store.state.user.memberNo || getAllToken("memberNo"), //类型：String  必有字段
            }
            // console.log(this.memberNo, 'this.memberNo')
            personRecord(para).then(res => {
                if (res.data.code == "000") {
                    this.usersInfo = res.data.content;
                    // console.log(this.usersInfo)
                } else {
                    Toast(`${res.data.desc}`)
                }
            })
            memberInfo(para).then(res => {
                console.log("用户头像=====================================>res", res)
                if (res.data.code == "000") {
                    this.userImg = res.data.content;
                    this.userImg.avatar = this.userImg.avatar ? this.userImg.avatar : 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png';
                    console.log(this.userImg)
                } else {
                    Toast(`${res.data.desc}`)
                }
            })

        },
        share() {
            this.$router.push({
                path: "/Poster",
                name: 'Poster'
            })
        }


    },


}
</script>

<style scoped lang="less">
.hello {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    background: #f4f4f4;
    overflow-y: scroll;
}

.bgc {
    width: 100%;
}

.qrcodeBox {
    width: 296px;
    height: 296px;
    padding: 20px;
    background: #F1F1F1;
    transform-origin: 0 0;
}

.topBox {
    min-width: 100%;
    padding: 27px 0 27px 0;
    height: 243px;
    margin-top: -200px;

    .img {
        max-width: 16.8vw;
        height: 16.8vw;
        border-radius: 50%;
        margin-bottom: 18px;
        vertical-align: middle;
    }

    .shre {
        width: 65px;
        height: 22px;
        background-color: rgb(139, 38, 49);
        border-radius: 15px 0 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        line-height: 22px;
        color: white;
        text-decoration: none;
        position: fixed;
        right: 0;
        top: 95px;
    }

    .nick {
        .ico {
            width: 4vw;
            height: 4vw;
        }

        .font {
            color: #ffe733;
        }
    }
}

.bottomBox {
    width: 95%;
    height: 147px;
    border-radius: 10px;
    color: rgb(101, 101, 101);
    background-color: #fff;

    .top {
        padding: 14px 0 14px 0;
        border-bottom: 1px solid #e8e8e8;
        line-height: 25px;

        .line {
            padding: 0 17px 0 17px;
        }

        .youjiantou {
            width: 17px;
            height: 20px;
        }
    }

    .middle {
        padding: 3.733333vw 8.333333vw 3.733333vw 8.333333vw;

    }

    .bottom {
        padding: 3.733333vw 8.333333vw 3.733333vw 8.333333vw;

        & > :nth-child(1) {
            margin-left: 2.2vw;
        }

        & > :nth-child(2) {
            margin-left: 2.9vw;
        }
    }

}

//海报信息
.box {
    overflow-x: hidden;

    .bgcImg {
        background-attachment: fixed;
        height: 100%;
    }

    .topBox2 {
        width: 95%;
        height: 100px;
        border-radius: 25px;

        .bdouBox {
            .img1 {
                width: 63px;
                height: 63px;
                border-radius: 32px;
            }
        }

    }

    .qrcode {
        width: 95%;
        height: 174px;
        border-radius: 25px;
        position: absolute;
        left: 50%;
        top: 70%;
        transform: translateX(-50%);

        .code {
            width: 115px;
            height: 115px;
            border: 1px solid gray;
        }
    }
}

</style>
